<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
    <meta
            content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
            name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="css/ydui.css"/>
    <link rel="stylesheet" href="css/mystyle.css"/>
    <!-- 自适应解决方案类库 -->
    <script src="js/ydui.flexible.js"></script>
</head>
<body>
<!-- header -->
<header id="hd" class="m-navbar navbar-fixed" style="display:none">
    <a href="#" class="navbar-item"><i class="back-ico"></i></a>
    <div class="navbar-center">
        <span class="navbar-title">证件上传模板</span>
    </div>
</header>
<!-- headerend -->

<section class="g-flexview bgf3f headp_t">

    <div class="g-scrollview">

        <form method="post" enctype="multipart/form-data" action="upload">
            <div class="frambox">
                <h2>请填写以下信息</h2>
                <div class="list_box">
                    <div class="m-cell demo-small-pitch">
                        <div class="cell-item">
                            <div class="cell-left">首页标题1</div>
                            <div class="cell-right">
                                <input type="text" class="cell-input" placeholder="填就完了" name="title1"
                                       autocomplete="off">
                            </div>
                        </div>
                        <div class="cell-item">
                            <div class="cell-left">首页标题2</div>
                            <div class="cell-right">
                                <input type="text" class="cell-input" placeholder="填就完了" name="title2"
                                       autocomplete="off">
                            </div>
                        </div>
                        <div class="cell-item">
                            <div class="cell-left">首页标识</div>
                            <div class="cell-right">
                                <input type="text" class="cell-input" placeholder="填就完了" name="flag"
                                       autocomplete="off">
                            </div>
                        </div>
                        <div class="cell-item">
                            <div class="cell-left">首页内容</div>
                            <div class="cell-right">
                                <input type="text" class="cell-input" placeholder="填就完了" name="content1"
                                       autocomplete="off">
                            </div>
                        </div>
                        <div class="cell-item">
                            <div class="cell-left">详细内容</div>
                            <div class="cell-right">
                                <input type="text" class="cell-input" placeholder="填就完了" name="content2"
                                       autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="frambox">
                <h2>美照</h2>
                <div class="font_box">
                    <div class="m-grids-2">
                        <a href="javascript:sfzzmSc();" class="grids-item">
                            <div id="sfzzmImg" class="grids-icon">
                                <img src="/img/img.png">
                            </div>
                            <div class="grids-txt">
                                <span>上传图片</span>
                            </div>
                        </a> <input style="display: none" id="sfzzm" type="file" name="file"
                                    onchange="javascript:showpic(this,'sfzzmImg');" accept="image/*" multiple/>
                    </div>
                </div>
            </div>

            <div class="btn_mian" style="display: flex;justify-content: space-around">
                <button class="btn btn-primary btnbom">提交数据</button>
                <button class="btn btn-primary btnbom" onclick="return next()" onsubmit="return false;">返回首页</button>

            </div>
        </form>

        <div class="btn_mian">
        </div>

    </div>
    <!-- 点击图片放大区 -->
    <div id="outerdiv"
         style="position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 2; width: 100%; height: 100%; display: none;">
        <div id="innerdiv" style="position: absolute;">
            <img id="bigimg" style="border: 5px solid #fff;" src=""/>
        </div>
    </div>

</section>

<!-- 引入jQuery 2.0+ -->
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!-- 引入YDUI脚本 -->
<script src="js/ydui.js"></script>
<script>
    !function ($) {
        $("#hd").hide();
    }(jQuery);

    function sfzzmSc() {//点击触发h5File类型上传，身份证正面
        $("#sfzzm").click();
    }

    function showBigPic(src) {//点击图片放大,（目前图片包含于上传点集中，点击不到图片，所以不起效果，需要放大时自行修改html代码即可）
        imgShow("#outerdiv", "#innerdiv", "#bigimg", src.src);
    }

    function showpic(obj, id) {//图片展示
        //var imgs = document.getElementById("sfzzmImg").getElementsByTagName("img");
        for (var i = 0, file; file = obj.files[i]; i++) {
            if (i > 0) {
                break;
            }
            var reader = new FileReader();
            reader.onload = function (e) {//图片读取展示
                console.log(e);
                var htmlimg = '<img style="margin-left:2px;" id="' + e.timeStamp + '" class="min"  src="' + e.target.result + '" onclick="showBigPic(this)"/>';
                $("#" + id).html(htmlimg);
            }
            reader.readAsDataURL(file);

        }
    }

    function next() {
        location.href="/"
        return false;
    }
</script>
<script type="text/javascript">
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    function compress(img) {//上传信息时图片处理
        var initSize = img.src.length;
        // 图片原始尺寸
        var originWidth = img.width;
        var originHeight = img.height;
        // 最大尺寸限制，可通过国设置宽高来实现图片压缩程度
        var maxWidth = 800,
            maxHeight = 800;
        // 目标尺寸
        var targetWidth = originWidth,
            targetHeight = originHeight;
        // 图片尺寸超过400x400的限制
        if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
                // 更宽，按照宽度限定尺寸
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
            } else {
                targetHeight = maxHeight;
                targetWidth = Math.round(maxHeight * (originWidth / originHeight));
            }
        } else {
            targetWidth = 400;
            targetHeight = 400;
        }
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        // 清除画布
        ctx.clearRect(0, 0, targetWidth, targetHeight);
        // 图片压缩
        ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
        //进行最小压缩
        var ndata = canvas.toDataURL("image/jpeg", 0.92);//此为图片base64数据，传至后台或保存数据库/或保存服务器都可以
        return ndata;
    }
</script>
</body>
</html>